<template>
  <div>
    <h1>地图管理</h1>

    <el-space>
      <el-button @click="addMarker">添加点标记</el-button>
      <el-button @click="updateMarker">Id为1的标记，操作它移动</el-button>
      <el-button @click="removeMarker">Id为1的标记，操作它删除</el-button>
      <el-button @click="addPolyline">添加线</el-button>
    </el-space>

    <div ref="boxRef" class="box"></div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import location from '../../assets/location.png'

console.log('location', location)

const boxRef = ref<HTMLDivElement | null>(null)
let map: any = null
let marker: any = null

function addMarker() {
  marker = new TMap.MultiMarker({
    map, // 指定该图层应用于那个地图实例上
    styles: {
      //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
      myStyle: new TMap.MarkerStyle({
        width: 25, // 点标记样式宽度（像素）
        height: 35, // 点标记样式高度（像素）
        // PS: 如下的写法无法获取到对应的静态资源
        //     这里的写法将该图片当成了一个普通的字符串引入。我们需要将它当成模块的方式引入才行（构建工具需要工作）
        // src: '../../assets/location.png', //图片路径
        src: location,
        //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
        anchor: { x: 16, y: 32 }
      })
    },
    //点标记数据数组
    geometries: [
      {
        id: '1', //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
        styleId: 'myStyle', //指定样式id
        position: new TMap.LatLng(22.588226, 113.950648), //点标记坐标位置
        properties: {
          //自定义属性
          title: 'marker1'
        }
      },
      {
        //第二个点标记
        id: '2',
        // styleId: 'marker',
        position: new TMap.LatLng(22.587629, 113.985468),
        properties: {
          title: 'marker2'
        }
      }
    ]
  })

  // 添加点击事件
  marker.on('click', (e: any) => {
    console.log('1111', e)
  })
}

// 修改点标记
function updateMarker() {
  if (!marker) {
    return
  }

  // 1. 先获取到要操作的点标记的数据
  const geo = marker.getGeometryById('1')
  // 2. 通过 Object.assign 去覆盖属性
  const newData = Object.assign(geo, {
    position: new TMap.LatLng(22.596156, 113.972168)
  })
  // 3. 修改
  marker.updateGeometries([newData])

  // marker.updateGeometries([
  //   {
  //     id: '1',
  //     position: new TMap.LatLng(22.596156, 113.972168)
  //   }
  // ])
}

function removeMarker() {
  if (!marker) {
    return
  }

  // 删除 id "1" 点标记
  marker.remove(['1'])
}

function addPolyline() {
  var polylineLayer = new TMap.MultiPolyline({
    id: 'polyline-layer', //图层唯一标识
    map: map, //设置折线图层显示到哪个地图实例中
    //折线样式定义
    styles: {
      style_blue: new TMap.PolylineStyle({
        color: '#3777FF', //线填充色
        width: 6, //折线宽度
        borderWidth: 5, //边线宽度
        borderColor: '#FFF', //边线颜色
        dashArray: [10, 10],
        lineCap: 'butt' //线端头方式
      }),
      style_red: new TMap.PolylineStyle({
        color: '#CC0000', //线填充色
        width: 6, //折线宽度
        borderWidth: 5, //边线宽度
        borderColor: '#CCC', //边线颜色
        showArrow: true,
        lineCap: 'round' //线端头方式
      })
    },
    //折线数据定义
    geometries: [
      {
        //第1条线
        id: 'pl_1', //折线唯一标识，删除时使用
        styleId: 'style_blue', //绑定样式名
        paths: [
          new TMap.LatLng(22.59104, 113.928112),
          new TMap.LatLng(22.587117, 113.99729),
          new TMap.LatLng(22.575519, 114.011236)
        ]
      },
      {
        //第2条线
        id: 'pl_2',
        styleId: 'style_red',
        paths: [new TMap.LatLng(22.599567, 114.01022), new TMap.LatLng(22.55232, 113.991933)]
      }
    ]
  })
}
onMounted(() => {
  // 创建一个中心点的坐标点
  const center = new TMap.LatLng(22.588908, 113.973553)
  console.log(center)
  // 初始化地图
  map = new TMap.Map(boxRef.value, {
    // 额外的配置项
    center: center
  })
})
</script>

<style lang="scss" scoped>
.box {
  width: 500px;
  height: 400px;
}
</style>
